<template>
  <div class="order-warp">
    <div class="search">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item label="车牌号">
          <el-input
            v-model="queryParams.carNumber"
            clearable
            placeholder="输入车牌号"
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-select
            v-model="queryParams.carTypeId"
            clearable
            placeholder="选择车辆类型"
            @change="handleQuery"
          >
            <el-option
              v-for="item in carTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryParams.state"
            clearable
            placeholder="选择状态"
            @change="handleQuery"
          >
            <el-option
              v-for="item in stateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" plain @click="handleQuery"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-button
      class="operate"
      type="primary"
      :icon="Plus"
      @click="
        initCar();
        dialogVisible = true;
      "
      >新增车辆信息</el-button
    >
    <el-table :data="carList" stripe style="width: 100%">
      <el-table-column prop="id" label="车辆编号" width="100" />
      <el-table-column prop="carNumber" label="车牌号" width="100" />
      <el-table-column prop="carTypeName" label="车辆类型" width="100" />
      <el-table-column label="车辆状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.state == 1" type="info"> 使用中 </el-tag>
          <el-tag v-if="scope.row.state == 0" type="success"> 未占用 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="180" />
      <el-table-column prop="createTime" label="添加时间" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="text"
            :icon="Edit"
            size="small"
            @click="toUpdateCar(scope.row)"
            v-if="scope.row.state == 0"
            >修改</el-button
          >
          <el-popconfirm
            v-if="scope.row.state == 0"
            title="确定删除该车辆?"
            @confirm="doDeleteCar(scope.row.id)"
          >
            <template #reference>
              <el-button type="text" :icon="Delete" size="small"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div></div>
    <div class="footer">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

     <el-dialog
    v-model="dialogVisible"
    :title="car.id ? '修改车辆信息' : '新增车辆信息'"
    width="500px"
  >
    <el-form
      :rules="rules"
      style="margin-top: 20px"
      ref="formEl"
      :model="car"
      label-width="80px"
    >
      <el-form-item label="车牌号" prop="carNumber">
        <el-input :maxlength="8" v-model="car.carNumber"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="carTypeId">
        <el-select
          v-model="car.carTypeId"
          style="width: 100%"
          placeholder="车辆类型"
        >
          <el-option
            v-for="item in carTypeList"
            :label="item.name + '(' + item.price + '元)'"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doSaveCar">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>

 
</template>

<script setup>
import { ref, reactive, onMounted, toRaw, getCurrentInstance } from "vue";
import { getCarList, saveCar, updateCar, deleteCar } from "../../api/car";
import { getCarTypeList } from "../../api/order";
import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { isVehicleNumber } from "../../utils";
const vehicleNumber = (rule, value, callback) => {
  if (isVehicleNumber(value)) {
    callback();
  } else {
    return callback(new Error("车牌号不正确"));
  }
};

const carTypeList = reactive([]);

const car = ref({});

const formEl = ref();

const clearWarning = () => {
  if (formEl.value) {
    formEl.value.resetFields();
  }
};
const dialogVisible = ref(false);

const initCar = () => {
  car.value = {
    id: null,
    carNumber: null,
    carTypeId: null,
    carTypeName: null,
    state: null,
  };
  clearWarning();
};
initCar();

const doSaveCar = () => {
  formEl.value.validate((valid) => {
    if (valid) {
      if (!car.value.id) {
        saveCar(car.value).then((res) => {
          ElMessage.success("新增车辆成功");
          dialogVisible.value = false;
          getList();
        });
      } else {
        updateCar(car.value).then((res) => {
          ElMessage.success("修改车辆成功");
          dialogVisible.value = false;
          getList();
        });
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const { proxy } = getCurrentInstance();

const toUpdateCar = (data) => {
  car.value = proxy.$deepCopy(data);

  dialogVisible.value = true;
};

const doDeleteCar = (id)=>{
    deleteCar(id).then(res=>{
        getList();
    })
}

const rules = reactive({
  carNumber: [
    {
      required: true,
      message: "请输入车牌号",
      trigger: "blur",
    },
    {
      validator: vehicleNumber,
      trigger: "blur",
    },
  ],
  carTypeId: [
    {
      required: true,
      message: "请选择车辆类型",
      trigger: "change",
    },
  ],
});

getCarTypeList().then((res) => {
  carTypeList.push(...res.data);
});

const carList = ref([]);

const queryParams = ref({
  carNumber: null,
  state: null,
  current: 1,
  size: 10,
});

const stateList = [
  {
    id: 1,
    name: "使用中",
  },
  {
    id: 2,
    name: "未占用",
  },
];

const loading = ref(false);
const total = ref(0);
const getList = () => {
  getCarList(queryParams.value).then((res) => {
    carList.value = res.data.records;
    total.value = res.data.total;
    loading.value = false;
  });
};

const handleQuery = () => {
  queryParams.value.current = 1;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="less">
.order-warp {
  .operate {
    margin-bottom: 20px;
  }

  .footer {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
